یاد بگیرید چگونه تغییرات جهت‌گیری صفحه را در برنامه‌های خود به طور موثر مدیریت کنید تا تجربه‌ی کاربری یکپارچه‌ای را در تمام دستگاه‌ها و پلتفرم‌ها تضمین نمایید.
تسلط بر جهت‌گیری صفحه: راهنمای جامع مدیریت چرخش دستگاه
در دنیای چنددستگاهی امروز، مدیریت صحیح جهت‌گیری صفحه برای ارائه یک تجربه کاربری مثبت، امری حیاتی است. چه یک گوشی هوشمند، تبلت یا حتی یک دستگاه تاشو باشد، کاربران انتظار دارند که برنامه‌ها هنگام چرخش دستگاه به طور یکپارچه سازگار شوند. این راهنما یک مرور جامع بر مدیریت چرخش دستگاه ارائه می‌دهد و پلتفرم‌ها و تکنیک‌های مختلف را برای اطمینان از واکنش‌گرا و کاربرپسند بودن برنامه‌های شما پوشش می‌دهد.
درک جهت‌گیری صفحه
جهت‌گیری صفحه به جهتی اطلاق می‌شود که محتوا روی صفحه دستگاه نمایش داده می‌شود. دو جهت‌گیری اصلی عبارتند از:
- عمودی (Portrait): صفحه بلندتر از عرض آن است. این جهت‌گیری معمول برای گوشی‌های هوشمند است.
- افقی (Landscape): صفحه عریض‌تر از ارتفاع آن است. این حالت اغلب برای تماشای ویدیو یا بازی کردن ترجیح داده می‌شود.
برخی دستگاه‌ها و برنامه‌ها همچنین از موارد زیر پشتیبانی می‌کنند:
- عمودی معکوس (Reverse Portrait): جهت‌گیری عمودی با چرخش ۱۸۰ درجه‌ای دستگاه.
- افقی معکوس (Reverse Landscape): جهت‌گیری افقی با چرخش ۱۸۰ درجه‌ای دستگاه.
چرا باید تغییرات جهت‌گیری صفحه را مدیریت کرد؟
عدم مدیریت تغییرات جهت‌گیری صفحه می‌تواند به مشکلات مختلفی منجر شود، از جمله:
- مشکلات چیدمان (Layout): ممکن است عناصر جابجا شوند، بریده شوند یا روی هم قرار گیرند.
- از دست رفتن داده‌ها: در برخی موارد، وضعیت اکتیویتی یا برنامه ممکن است هنگام چرخش صفحه از بین برود.
- تجربه کاربری ضعیف: یک تجربه ناخوشایند یا ناقص می‌تواند کاربران را ناامید کند و به اعتبار برنامه شما آسیب برساند.
- مشکلات عملکرد: رندر مجدد و محاسبات چیدمان مکرر می‌تواند بر عملکرد تأثیر بگذارد، به خصوص در دستگاه‌های قدیمی‌تر.
مدیریت جهت‌گیری صفحه در پلتفرم‌های مختلف
تکنیک‌های خاص برای مدیریت جهت‌گیری صفحه بسته به پلتفرمی که برای آن توسعه می‌دهید، متفاوت است. بیایید برخی از محبوب‌ترین پلتفرم‌ها را بررسی کنیم:
۱. اندروید
اندروید چندین مکانیزم برای مدیریت تغییرات جهت‌گیری صفحه فراهم می‌کند. رایج‌ترین رویکردها عبارتند از:
الف. تغییرات پیکربندی (Configuration Changes)
به طور پیش‌فرض، اندروید هنگام تغییر جهت‌گیری صفحه، اکتیویتی (Activity) را دوباره ایجاد می‌کند. این بدان معناست که متد `onCreate()` دوباره فراخوانی می‌شود و کل چیدمان مجدداً بارگذاری (re-inflated) می‌شود. در حالی که این می‌تواند برای بازسازی کامل UI بر اساس جهت‌گیری مفید باشد، اما اگر فقط نیاز به تنظیم جزئی چیدمان داشته باشید، می‌تواند ناکارآمد باشد.
برای جلوگیری از ایجاد مجدد اکتیویتی، می‌توانید اعلام کنید که اکتیویتی شما تغییرات پیکربندی `orientation` را در فایل `AndroidManifest.xml` مدیریت می‌کند:
<activity
android:name=".MyActivity"
android:configChanges="orientation|screenSize"
... >
</activity>
با افزودن `orientation` و `screenSize` (مهم برای API سطح ۱۳ و بالاتر)، شما به سیستم می‌گویید که اکتیویتی شما خود تغییرات جهت‌گیری را مدیریت خواهد کرد. هنگامی که صفحه می‌چرخد، متد `onConfigurationChanged()` فراخوانی خواهد شد.
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Check the orientation of the screen
if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
} else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
}
}
درون `onConfigurationChanged()`، می‌توانید UI را بر اساس جهت‌گیری جدید به‌روزرسانی کنید. این رویکرد کارآمدتر از ایجاد مجدد اکتیویتی است زیرا از بارگذاری منابع و چیدمان غیرضروری جلوگیری می‌کند.
ب. ذخیره و بازیابی وضعیت اکتیویتی
حتی اگر خودتان تغییر پیکربندی را مدیریت کنید، ممکن است همچنان نیاز به ذخیره و بازیابی وضعیت اکتیویتی داشته باشید. به عنوان مثال، اگر اکتیویتی شما یک فیلد متنی دارد، می‌خواهید متنی را که کاربر وارد کرده است هنگام چرخش صفحه حفظ کنید.
می‌توانید از متد `onSaveInstanceState()` برای ذخیره وضعیت اکتیویتی و متد `onRestoreInstanceState()` برای بازیابی آن استفاده کنید.
@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
savedInstanceState.putString("my_text", myTextView.getText().toString());
super.onSaveInstanceState(savedInstanceState);
}
@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
String myText = savedInstanceState.getString("my_text");
myTextView.setText(myText);
}
به عنوان جایگزین، می‌توانید از ViewModelها همراه با SavedStateHandle برای مدیریت و حفظ داده‌های مرتبط با UI در طول تغییرات پیکربندی استفاده کنید که رویکردی مدرن‌تر و توصیه‌شده است.
ج. چیدمان‌های جایگزین
اندروید به شما اجازه می‌دهد تا فایل‌های چیدمان متفاوتی برای جهت‌گیری‌های مختلف صفحه ارائه دهید. شما می‌توانید فایل‌های چیدمان جداگانه‌ای در دایرکتوری‌های `res/layout-land/` و `res/layout-port/` ایجاد کنید. هنگامی که صفحه می‌چرخد، اندروید به طور خودکار فایل چیدمان مناسب را بارگذاری می‌کند.
این رویکرد زمانی مفید است که UI در جهت‌گیری‌های افقی و عمودی نیاز به تفاوت قابل توجهی داشته باشد. به عنوان مثال، ممکن است بخواهید یک چیدمان دو ستونی در حالت افقی و یک چیدمان تک ستونی در حالت عمودی نمایش دهید.
د. استفاده از ConstraintLayout
ConstraintLayout یک مدیر چیدمان قدرتمند است که به شما امکان می‌دهد چیدمان‌های انعطاف‌پذیر و تطبیق‌پذیر ایجاد کنید. با ConstraintLayout، می‌توانید محدودیت‌هایی (constraints) تعریف کنید که نحوه قرارگیری ویوها نسبت به یکدیگر و نسبت به چیدمان والد را مشخص می‌کنند. این کار ایجاد چیدمان‌هایی را که با اندازه‌ها و جهت‌گیری‌های مختلف صفحه سازگار هستند، آسان‌تر می‌کند.
۲. iOS
iOS نیز مکانیزم‌هایی برای مدیریت تغییرات جهت‌گیری صفحه فراهم می‌کند. در اینجا برخی از رویکردهای رایج آورده شده است:
الف. چیدمان خودکار (Auto Layout)
Auto Layout یک سیستم چیدمان مبتنی بر محدودیت است که به شما امکان می‌دهد قوانینی برای نحوه قرارگیری و اندازه‌گیری ویوها تعریف کنید. محدودیت‌های Auto Layout تضمین می‌کنند که UI شما با اندازه‌ها و جهت‌گیری‌های مختلف صفحه سازگار شود.
هنگام استفاده از Auto Layout، شما معمولاً محدودیت‌هایی تعریف می‌کنید که روابط بین ویوها را مشخص می‌کنند. به عنوان مثال، ممکن است یک دکمه را محدود کنید تا به صورت افقی و عمودی در مرکز ویوی والد خود قرار گیرد. هنگامی که صفحه می‌چرخد، موتور Auto Layout به طور خودکار موقعیت‌ها و اندازه‌های ویوها را برای برآورده کردن محدودیت‌ها دوباره محاسبه می‌کند.
ب. کلاس‌های اندازه (Size Classes)
کلاس‌های اندازه روشی برای دسته‌بندی اندازه‌ها و جهت‌گیری‌های صفحه هستند. iOS دو کلاس اندازه تعریف می‌کند: `Compact` و `Regular`. یک دستگاه می‌تواند کلاس‌های اندازه متفاوتی برای عرض و ارتفاع خود داشته باشد. به عنوان مثال، یک آیفون در جهت‌گیری عمودی دارای کلاس اندازه عرض `Compact` و کلاس اندازه ارتفاع `Regular` است. در حالت افقی، اغلب دارای ارتفاع `Compact` و عرض `Compact` یا `Regular` بسته به مدل است.
شما می‌توانید از کلاس‌های اندازه برای سفارشی‌سازی UI خود بر اساس اندازه و جهت‌گیری صفحه استفاده کنید. به عنوان مثال، ممکن است بخواهید مجموعه متفاوتی از ویوها را نمایش دهید یا از فونت‌های مختلفی برای کلاس‌های اندازه متفاوت استفاده کنید.
شما می‌توانید محدودیت‌های مختلفی را پیکربندی کرده و حتی ویوها را بر اساس کلاس‌های اندازه مستقیماً در Interface Builder یا به صورت برنامه‌نویسی نصب/حذف کنید.
ج. متدهای چرخش View Controller
iOS چندین متد در کلاس UIViewController ارائه می‌دهد که هنگام چرخش دستگاه فراخوانی می‌شوند:
viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): قبل از تغییر اندازه ویوی ویو کنترلر برای یک انتقال فراخوانی می‌شود.viewWillLayoutSubviews(): درست قبل از اینکه ویوی ویو کنترلر زیرویوهای خود را بچیند، فراخوانی می‌شود.viewDidLayoutSubviews(): درست پس از اینکه ویوی ویو کنترلر زیرویوهای خود را چید، فراخوانی می‌شود.
شما می‌توانید این متدها را برای انجام تنظیمات چیدمان سفارشی هنگام چرخش صفحه، بازنویسی (override) کنید.
د. مرکز اعلان (Notification Center)
شما می‌توانید با استفاده از Notification Center به اعلان‌های تغییر جهت‌گیری گوش دهید:
NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)
@objc func orientationChanged() {
if UIDevice.current.orientation.isLandscape {
print("Landscape")
} else {
print("Portrait")
}
}
۳. توسعه وب (HTML، CSS، جاوا اسکریپت)
در توسعه وب، می‌توانید از مدیا کوئری‌های CSS و جاوا اسکریپت برای مدیریت تغییرات جهت‌گیری صفحه استفاده کنید.
الف. مدیا کوئری‌های CSS
مدیا کوئری‌ها به شما امکان می‌دهند استایل‌های مختلفی را بر اساس اندازه صفحه، جهت‌گیری و سایر مشخصات اعمال کنید. می‌توانید از ویژگی رسانه‌ای `orientation` برای هدف قرار دادن جهت‌گیری‌های خاص استفاده کنید.
/* Portrait orientation */
@media (orientation: portrait) {
body {
background-color: lightblue;
}
}
/* Landscape orientation */
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}
شما می‌توانید از مدیا کوئری‌ها برای تنظیم چیدمان، فونت‌ها و سایر استایل‌ها بر اساس جهت‌گیری استفاده کنید.
ب. جاوا اسکریپت
می‌توانید از جاوا اسکریپت برای تشخیص تغییرات جهت‌گیری صفحه و انجام اقدامات سفارشی استفاده کنید. API `screen.orientation` اطلاعاتی در مورد جهت‌گیری فعلی ارائه می‌دهد.
function handleOrientationChange() {
if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
console.log("Landscape");
} else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
console.log("Portrait");
} else {
console.log("Unknown orientation");
}
}
window.addEventListener("orientationchange", handleOrientationChange);
به عنوان جایگزین، می‌توانید از API `matchMedia` با مدیا کوئری‌ها استفاده کنید:
const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");
function handleOrientationChange(event) {
if (event.matches) {
console.log("Landscape");
} else {
console.log("Portrait");
}
}
landscapeMediaQuery.addEventListener("change", handleOrientationChange);
جاوا اسکریپت می‌تواند برای تنظیم پویای چیدمان، بارگذاری منابع مختلف یا انجام اقدامات دیگر بر اساس جهت‌گیری استفاده شود.
ج. فریم‌ورک‌های طراحی واکنش‌گرا
فریم‌ورک‌هایی مانند Bootstrap، Foundation و Materialize CSS پشتیبانی داخلی برای طراحی واکنش‌گرا ارائه می‌دهند و ایجاد چیدمان‌هایی را که با اندازه‌ها و جهت‌گیری‌های مختلف صفحه سازگار هستند، آسان‌تر می‌کنند. این فریم‌ورک‌ها معمولاً از یک سیستم گرید و مدیا کوئری‌ها برای ایجاد UIهای انعطاف‌پذیر و واکنش‌گرا استفاده می‌کنند.
بهترین شیوه‌ها برای مدیریت جهت‌گیری صفحه
در اینجا برخی از بهترین شیوه‌ها برای در نظر گرفتن هنگام مدیریت تغییرات جهت‌گیری صفحه آورده شده است:
- از ایجاد مجدد غیرضروری Activity/ViewController خودداری کنید: در صورت امکان، تغییر پیکربندی را خودتان مدیریت کنید تا از سربار ایجاد مجدد Activity یا ViewController جلوگیری شود.
- ذخیره و بازیابی وضعیت: همیشه وضعیت Activity/ViewController را برای جلوگیری از از دست رفتن داده‌ها ذخیره و بازیابی کنید. از ViewModelها برای مدیریت قوی‌تر وضعیت استفاده کنید.
- از Auto Layout یا ConstraintLayout استفاده کنید: این سیستم‌های چیدمان، ایجاد چیدمان‌های انعطاف‌پذیر و تطبیق‌پذیر را آسان‌تر می‌کنند.
- روی چندین دستگاه تست کنید: برنامه خود را روی انواع دستگاه‌ها با اندازه‌ها و جهت‌گیری‌های مختلف صفحه آزمایش کنید تا از عملکرد صحیح آن اطمینان حاصل کنید.
- دسترسی‌پذیری را در نظر بگیرید: اطمینان حاصل کنید که برنامه شما هنگام چرخش صفحه برای کاربران دارای معلولیت قابل دسترس باقی می‌ماند.
- نشانه‌های بصری واضح ارائه دهید: اگر UI هنگام چرخش صفحه به طور قابل توجهی تغییر می‌کند، نشانه‌های بصری واضحی ارائه دهید تا به کاربران در درک تغییرات کمک کنید.
- از تحمیل یک جهت‌گیری خاص خودداری کنید (مگر اینکه ضروری باشد): به کاربران اجازه دهید تا حد امکان از دستگاه خود در جهت‌گیری دلخواهشان استفاده کنند. تحمیل یک جهت‌گیری می‌تواند خسته‌کننده و نامناسب باشد. فقط در صورتی جهت‌گیری را قفل کنید که برای عملکرد برنامه حیاتی باشد (مثلاً یک بازی که به حالت افقی نیاز دارد). اگر جهت‌گیری را قفل می‌کنید، دلیل آن را به وضوح به کاربر اطلاع دهید.
- برای عملکرد بهینه‌سازی کنید: میزان کاری را که باید هنگام چرخش صفحه انجام شود به حداقل برسانید تا از مشکلات عملکرد جلوگیری شود.
- از واحدهای نسبی استفاده کنید: هنگام تعریف اندازه‌ها و موقعیت‌ها در چیدمان خود، از واحدهای نسبی (مانند درصد، `dp`، `sp`) به جای واحدهای مطلق (مانند پیکسل) استفاده کنید تا اطمینان حاصل شود که UI شما در اندازه‌های مختلف صفحه به درستی مقیاس‌بندی می‌شود.
- از کتابخانه‌ها و فریم‌ورک‌های موجود بهره ببرید: از کتابخانه‌ها و فریم‌ورک‌های موجود که پشتیبانی از طراحی واکنش‌گرا و مدیریت جهت‌گیری صفحه را ارائه می‌دهند، استفاده کنید.
قفل کردن جهت‌گیری و تجربه کاربری
در حالی که به طور کلی بهتر است به کاربران اجازه دهید دستگاه‌های خود را آزادانه بچرخانند، موقعیت‌هایی وجود دارد که ممکن است بخواهید جهت‌گیری صفحه را قفل کنید. به عنوان مثال، یک پخش‌کننده ویدیوی تمام‌صفحه ممکن است جهت‌گیری را برای مشاهده بهینه به حالت افقی قفل کند.
با این حال، مهم است که از قفل کردن جهت‌گیری به ندرت استفاده کنید و دلیل واضحی به کاربر ارائه دهید. تحمیل یک جهت‌گیری می‌تواند خسته‌کننده باشد و برنامه شما را کمتر در دسترس قرار دهد.
چگونه جهت‌گیری صفحه را قفل کنیم
اندروید
شما می‌توانید جهت‌گیری صفحه را در اندروید با تنظیم ویژگی `screenOrientation` در فایل `AndroidManifest.xml` قفل کنید:
<activity
android:name=".MyActivity"
android:screenOrientation="landscape"
... >
</activity>
همچنین می‌توانید جهت‌گیری را به صورت برنامه‌نویسی قفل کنید:
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
iOS
در iOS، می‌توانید جهت‌گیری‌های پشتیبانی‌شده را در فایل `Info.plist` مشخص کنید. همچنین می‌توانید متد `supportedInterfaceOrientations` را در ویو کنترلر خود بازنویسی کنید:
override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
return .landscape
}
ملاحظات جهانی
هنگام طراحی برای مخاطبان جهانی، موارد زیر را در مورد جهت‌گیری صفحه در نظر داشته باشید:
- چیدمان‌های راست-به-چپ (RTL): در نظر بگیرید که UI شما چگونه با زبان‌های RTL سازگار خواهد شد. برخی زبان‌ها مانند عربی و عبری از راست به چپ نوشته می‌شوند. اطمینان حاصل کنید که چیدمان شما در حالت RTL به درستی معکوس می‌شود. Auto Layout و ConstraintLayout اغلب پشتیبانی داخلی برای چیدمان‌های RTL ارائه می‌دهند.
- ترجیحات فرهنگی: به ترجیحات فرهنگی مربوط به استفاده از دستگاه توجه داشته باشید. در حالی که بیشتر کاربران به هر دو حالت عمودی و افقی عادت دارند، برخی فرهنگ‌ها ممکن است ترجیحات ظریفی داشته باشند. آزمایش با کاربران از مناطق مختلف می‌تواند بینش‌های ارزشمندی را ارائه دهد.
- دسترسی‌پذیری برای کاربران متنوع: همیشه دسترسی‌پذیری را در اولویت قرار دهید. اطمینان حاصل کنید که برنامه شما بدون توجه به جهت‌گیری صفحه، برای افراد دارای معلولیت قابل استفاده است. این شامل ارائه متن جایگزین برای تصاویر، تضمین کنتراست رنگ کافی و پشتیبانی از فناوری‌های کمکی است.
آزمایش مدیریت جهت‌گیری صفحه
آزمایش کامل برای اطمینان از اینکه برنامه شما تغییرات جهت‌گیری صفحه را به درستی مدیریت می‌کند، ضروری است. در اینجا چند نکته برای آزمایش آورده شده است:
- از شبیه‌سازها و دستگاه‌های واقعی استفاده کنید: برنامه خود را هم روی شبیه‌سازها و هم روی دستگاه‌های واقعی آزمایش کنید تا طیف وسیع‌تری از اندازه‌های صفحه و پیکربندی‌های سخت‌افزاری را پوشش دهید.
- در جهت‌گیری‌های مختلف تست کنید: برنامه خود را در هر دو جهت‌گیری عمودی و افقی و همچنین در صورت پشتیبانی، در حالت‌های عمودی معکوس و افقی معکوس آزمایش کنید.
- با اندازه‌های مختلف صفحه تست کنید: برنامه خود را روی دستگاه‌هایی با اندازه‌های مختلف صفحه آزمایش کنید تا اطمینان حاصل شود که UI به درستی مقیاس‌بندی می‌شود.
- با اندازه‌های مختلف فونت تست کنید: برنامه خود را با اندازه‌های مختلف فونت آزمایش کنید تا اطمینان حاصل شود که متن خوانا باقی می‌ماند.
- با فعال بودن ویژگی‌های دسترسی‌پذیری تست کنید: برنامه خود را با ویژگی‌های دسترسی‌پذیری مانند صفحه‌خوان‌ها فعال آزمایش کنید تا اطمینان حاصل شود که برای کاربران دارای معلولیت قابل دسترس باقی می‌ماند.
- تست خودکار: تست‌های UI خودکار را پیاده‌سازی کنید که تغییرات جهت‌گیری صفحه را پوشش می‌دهند. این می‌تواند به شناسایی رگرسیون‌ها و تضمین رفتار ثابت در نسخه‌های مختلف کمک کند.
نتیجه‌گیری
مدیریت موثر جهت‌گیری صفحه یک جنبه حیاتی از توسعه موبایل و وب است. با درک تکنیک‌های مختلف موجود در هر پلتفرم و پیروی از بهترین شیوه‌ها، می‌توانید برنامه‌هایی ایجاد کنید که یک تجربه کاربری یکپارچه و لذت‌بخش را بدون توجه به نحوه نگه داشتن دستگاه توسط کاربر، ارائه دهند. به یاد داشته باشید که آزمایش را در اولویت قرار دهید و پیامدهای جهانی انتخاب‌های طراحی خود را در نظر بگیرید تا اطمینان حاصل کنید که برنامه شما برای مخاطبان متنوع، قابل دسترس و کاربرپسند است.